<template>
  <div class="box">
    <div class="title">生产指标</div>
    <div class="one">
      <div class="three">
        <div class="left">
          <TrendChart v-if="chartShow"/>
        </div>
        <div class="right">
          <PressureCake v-if="chartShow"/>
        </div>
      </div>
      <div class="two">
        <div class="day-alarm">
          <AreaChart v-if="chartShow"/>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import AreaChart from "./components/AreaChart.vue";
import PressureCake from "./components/PressureCake.vue";
import TrendChart from "./components/TrendChart.vue";
import {getAreaHistory, getPipeAlarm} from "../../api/pipe/pipeLine";
import {usePipeStore} from "../../store/pipe";
import {ref} from "vue";
import {getAreaFlow} from "../../api/pipe/pipeLine";

// 管网报警数据
const pipeStore = usePipeStore();
let chartShow = ref<boolean>(false);
getPipeAlarm().then((res) => {
  pipeStore.pipeData = res.data.results;
  chartShow.value = true;
});

// 地区数据
interface Cake {
  address: string;
  pressure: Array<number>;
}

getAreaHistory().then((res) => {
  chartShow.value = true;
  if (pipeStore.cityData) {
    pipeStore.cityData = [];
  }
  res.data.results.forEach((item: Cake) => {
    let dataObj = {
      value: item.pressure.reduce((a, b) => a + b).toFixed(2),
      name: item.address,
    };
    pipeStore.cityData.push(dataObj);
  });
});

// 请求地区水压
getAreaFlow().then((res) => {
  pipeStore.areaPressureData = res.data.results;
  chartShow.value = true;
});
</script>

<style lang="scss" scoped>
.box {
  box-sizing: border-box;
  margin-top: 50px;
  width: 1650px;
  //height: 1200px;
  padding: 20px 0;

  .title {
    text-align: left;
    padding: 10px 30px;
    color: #000;
    font-size: 20px;
    font-weight: 900;
  }

  .over-view {
    display: flex;
    width: 100%;
    flex-wrap: wrap;
    justify-content: space-around;
    //margin-bottom: 30px;

    .pipe-over-view {
      width: 307px;
      height: 140px;
      border: 1px solid #ccc;
      margin: 10px;
      text-align: left;
      border-radius: 10px;
      //box-shadow: -1px 4px 22px rgba(0,0,0, .2);
      background-color: whitesmoke;
      color: #666666;

      .detail {
        margin: 40px;

        .top {
          margin-bottom: 15px;
          margin-left: 20px;
        }
      }

      .km {
        font-size: 20px;

        .km-c {
          font-size: 15px;
        }

        .kw {
          font-size: 15px;
        }

        .kw-c {
          font-size: 15px;
        }
      }
    }

    .bottom {
      .name {
        margin-left: 10px;
        font-size: 15px;
      }
    }
  }

  .two {
    display: flex;
    width: 100%;
    height: 500px;

    .day-alarm {
      width: 100%;
      height: 600px;
      border: 1px solid #ccc;
      color: #000;
      margin-left: 10px;
      border-radius: 10px;
      margin-top: 10px;
      position: relative;

      .c,
      .d,
      .e,
      .f {
        position: absolute;
        bottom: 100px;
        color: #666;
      }

      .c {
        left: 200px;

        .count-title {
          font-size: 18px;
          margin-bottom: 20px;
          color: orangered;
          font-weight: 900;
        }

        .count {
          font-size: 30px;
        }
      }

      .d {
        left: 430px;

        .count-title {
          font-size: 18px;
          margin-bottom: 20px;
          color: orangered;
          font-weight: 900;
        }

        .count {
          font-size: 30px;
        }
      }

      .e {
        left: 640px;

        .count-title {
          font-size: 18px;
          margin-bottom: 20px;
          color: orangered;
          font-weight: 900;
        }

        .count {
          font-size: 30px;
        }
      }

      .f {
        left: 850px;

        .count-title {
          font-size: 18px;
          margin-bottom: 20px;
          color: orangered;
          font-weight: 900;
        }

        .count {
          font-size: 30px;
        }
      }
    }

    #event-list {
      color: red;
      width: 640px;
      height: 100%;
      border: 1px solid #ccc;
      margin-top: 10px;
      border-radius: 10px;
      margin-left: 17px;
    }
  }
}

.left {
  width: 970px;
  height: 500px;
  border: 1px solid #ccc;
  margin-left: 5px;
  border-radius: 10px;
  margin-top: 30px;
}

.three {
  display: flex;
  justify-content: space-around;
}

.right {
  width: 640px;
  height: 500px;
  border: 1px solid #ccc;
  border-radius: 10px;
  margin-top: 30px;
  margin-left: 2px;
}

.icon {
  font-weight: normal;
  color: red;
}

.icon2 {
  font-size: 20px;
  color: #8dd1ff;
}

.chart {
  float: left;
  margin-left: 30px;
  margin-top: -40px;
}
</style>
